<!DOCTYPE html>
<html lang="en">
<head>
    <title>培训管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        body {
        }

        .btn-blue {
            border: none;
            background: #2a8ced;
            color: #fff;
            height: 30px;
            width: 14%;
            border-radius: 3px;
        }

        .visitingBox {
            background: #fff;
            padding-bottom: 10px;
        }

        .item {
            height: 45px;
            line-height: 45px;
            margin-left: 20px;
            font-size: 14px;
            border-bottom: 1px solid #ddd;
        }

        .item .title {
            padding-left: 5px;
            height: 45px;
            line-height: 45px;
            position: relative;
            font-size: 16px;
            color: #333;
            float: left;
            position: relative;
        }

        .item .title i {
            position: absolute;
            left: -10px;
            top: 2px;
            color: red;
            font-size: 16px;
        }

        .item .value {
            float: right;
        }

        .moreSpan {
            margin-right: 145px;
            line-height: 18px;
            max-height: 45px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            visibility: inherit;
            margin-top: -1px;
            width: 100%;
        }

        .value input {
            border: none;
            height: 43px;
            line-height: 43px;
            text-align: right;
            padding-right: 20px;
            color: #2a8cec;
        }

        .btn-blue.focus, .btn-blue:focus, .btn-blue:hover {
            color: #fff;
            text-decoration: none;
        }

        .lineOne {
            max-height: 24px;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            /*display: -webkit-box;*/
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .imgBox {
            margin-left: 20px;
        }

        .imgBox .title {
            padding-left: 5px;
            height: 45px;
            line-height: 45px;
            position: relative;
            font-size: 16px;
            color: #333;
        }

        .imgBox .title i {
            position: absolute;
            left: -10px;
            top: 2px;
            color: red;
            font-size: 16px;
        }

        .imgBox img {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
        }

        .imgBox .desc {
            color: #aaa;
        }

        .btnBox {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            margin-top: 60px;
            position: relative;
        }

        .btnBj {
            background: #cde2f7;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            position: relative;
            animation: mymove 3s infinite;
            -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
            animation-direction: alternate; /*轮流反向播放动画。*/
            animation-timing-function: linear; /*动画的速度曲线*/
            /* Safari 和 Chrome */
            -webkit-animation: mymove 3s infinite;
            -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
        }

        .btn.active {
            background: #2a8cec;
        }

        .btn {
            position: absolute;
            width: 96px;
            height: 96px;
            left: 50%;
            top: 50%;
            margin-left: -48px;
            margin-top: -48px;
            border-radius: 50%;
            background: #dfdfdf;
            color: #fff;
        }

        .btn.focus, .btn:focus, .btn:hover {
            color: #fff;
            text-decoration: none;
        }

        .btn .time {
            font-size: 20px;
            margin-top: 14px;
        }

        .btn .start {
            font-size: 16px;
        }

        @keyframes mymove {
            0% {
                transform: scale(1); /*开始为原始大小*/
            }

            50% {
                transform: scale(0.8);
            }

        }

        @-webkit-keyframes mymove /*Safari and Chrome*/
        {
            0% {
                transform: scale(1); /*开始为原始大小*/
            }

            50% {
                transform: scale(0.8);
            }
        }

        .descBox {
            margin-left: 20px;
        }

        .descBox .title {
            padding-left: 5px;
            height: 45px;
            line-height: 45px;
            position: relative;
            font-size: 16px;
            color: #333;
            border-top: 1px solid #ddd;
            margin-top: 10px;
        }

        .centerBox {
            height: 80px;
            padding-right: 20px;
        }

        .centerBox textarea {
            width: 100%;
            height: 100%;
            padding: 8px 5px;
            color: #2a8cec;
        }

        .descBox .desc {
            color: #aaa;
            margin-top: 10px;
        }

        .spanTitle {
            width: 25%;
            height: 45px;
            /*text-align: center;*/
            margin-left: 5px;
        }

        .lineHeight {
            line-height: 45px;
        }

        .listBox {
            padding-top: 44px;
        }

        .selectBox {
            position: fixed;
            left: 0;
            width: 100%;
            /*background: #fff;*/
        }

        .listStyle {
            height: 44px;
            line-height: 44px;
            font-size: 12px;
            padding: 0 4px;
            border-bottom: 1px solid #ddd;
        }

        .tijiaoBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }

        table {
            table-layout: fixed;
            border: none;
            border-bottom: 1px solid #cbcbcd;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            height: 40px;
        }

    </style>
</head>
<body>
<section class="content" id="app" style="padding: 0px;" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="tabs" id="scrollDiv" style="padding-bottom: 30px;">
        <div class="selectBox">
            <table class="table" style="background: #d3e8fd !important;border-bottom: none;margin-bottom: 0px;">
                <thead>
                <tr>
                    <td style="width:30px;height: 45px;text-align: center;">序号</td>
                    <td style="text-align: center;">培训内容</td>
                    <td style="width:50px;text-align: center">截止</br>日期</td>
                    <td style="width:40px;text-align: center;">状态</td>
                    <td style="width:40px;text-align: center;">操作</td>
                </tr>
                </thead>
            </table>
        </div>
        <div class="listBox">
            <table class="table">
                <tbody>
                <tr v-for="(item,i) in list">
                    <td style="width:30px;text-align: center;">{{i+1}}</td>
                    <td style="text-align: left;    line-height: 40px;" @click="chaKan(item)" v-if="item.unNeedPX==1">
                        <span class="moreSpan">{{item.description}}</span>
                    </td>
                    <td style="text-align: left;    line-height: 40px;" v-else>
                        <span class="moreSpan">{{item.description}}</span>
                    </td>
                    <td style="width: 50px;text-align: center;">{{timeSub(item.endTime)}}
                    </td>
                    <!--<td style="width: 40px;text-align: center;line-height: 40px;" @click="daGuoDun(item)">
                        <span :style="(pxState(item)=='逾期' || pxState(item)=='未通过') ?'color :red;width:10%;text-align: center;':'width:10%;text-align: center;'">{{pxState(item)}}</span>
                    </td>-->
                    <td style="width:40px;" v-html="stateTO(item)" @click="daGuoDun(item)"></td>
                    <td style="width: 40px;text-align: center;line-height: 40px;" @click="daGuoDun(item)">
                        <span v-if="item.currentAuditorId == userId&&item.auditFlag==0"
                              style="color:#2a8cec;cursor: pointer;text-align: center;">&nbsp;审核&nbsp;</span>
                         <span v-else-if="item.createUserId == userId&&item.auditFlag!=0&&item.auditFlag!=1"
                               style="color:#2a8cec;cursor: pointer;text-align: center;">&nbsp;编辑&nbsp;</span>
                        <span v-else-if="item.auditFlag==1&&item.needPX==1&&item.passFlag==0"
                              style="color:#2a8cec;cursor: pointer;text-align: center;">&nbsp;开始&nbsp;
                        </span>
                        <span v-else
                              style="color:#2a8cec;cursor: pointer;text-align: center;">&nbsp;查看&nbsp;
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--滚动加载需要当传回的数据小余30条时显示-->
            <!--<div class="noMore" v-if="isMore">没有更多了~</div>-->
        </div>
    </div>
    <div class="tijiaoBtn" @click="add()">新增培训</div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="/dist/plugins/scroll/myScroll.js"></script>
<!--框架已定义 JS-->
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        page: {
            urlParams: null,
            queryParams: {
                requestPage: 1,
                pageSize: 30
            },
            dataUrl: '',
            createQueryParams: function () {
            },
            getByPage: function (type) {
                $.ajax({
                    url: $.wyui.page.dataUrl,
                    data: JSON.stringify($.wyui.page.queryParams),
                    beforeSend: function () {

                    },
                    complete: function () {
                    },
                    success: function (r) {
                        $.wyui.page.queryParams.requestPage++;

                        if (r.data.sendData.pager && r.data.sendData.pager.pageCount == 0) {
                            r.data.sendData.pager.pageCount = 1;
                        }
                        if (type == "scroll") {
                            $.wyui.page.getByPage_scroll_callback(r.data.sendData.records);
                        } else {
                            if ($.wyui.page.getByPage_callback_new) {
                                $.wyui.page.getByPage_callback_new(r.data.sendData.records);
                            }
                        }

                    }
                });
            }
        },
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                        JSBridge.call(UI, 'showToast', {title: r.e.desc})
                    }
                },
                error: function (e) {
                    JSBridge.call(UI, 'showToast', {title: e.responseText})
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            list: [],
            returnFlag: false,
            isMore: false,
        },
        methods: {
            add: function () {
                var that = this;
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    title: '新页面',         //顶部标题
                    url: '/page/exam/tempExamDetailApp.html?isAdd=1&userId=' + that.userId,
                    showTitleBar: false,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            timeSub: function (time, i) {
                if (time) {
                    return new Date(time).Format(TimeFormat.middle)
                } else {
                    return '';
                }
            },
            pxState: function (item) {
                var that = this;

                var str = that.haveTime(item);
                if (item.auditFlag == '-1') {
                    return '未提交';
                }
                if (item.auditFlag == '0') {
                    return '审核中';
                }
                if (item.auditFlag == '2') {
                    return '已驳回';
                }
                if (item.createUserId == getCurrentUser().id || item.needPX == 0) {
                    if (str == '已截止') {
                        return '逾期';
                    } else {
                        return '考核中';
                    }
                } else {
                    if (item.passFlag == 1) {
                        return '已通过';
                    } else {
                        if (str == '已截止') {
                            return '逾期';
                        } else {
                            return '未通过';
                        }
                    }
                }
            },
            haveTime: function (item) {
                var diff = new Date(item.endTime).getTime() - new Date().getTime();//时间差的毫秒数

                //计算出相差天数
                var days = Math.floor(diff / (24 * 3600 * 1000));

                //计算出小时数
                var leave1 = diff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000));
                //计算相差分钟数
                var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000));

                //计算相差秒7数
                var leave3 = leave2 % (60 * 1000);      //计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3 / 1000);

                var returnStr = "";
                if (days > 0) {
                    returnStr = days + "" + returnStr;
                } else {
                    returnStr = "0" + returnStr;
                }
                if (hours >= 0) {
                    if (hours == 0 && minutes < 0) {
                        return "已截止"
                    }
                } else {
                    return "已截止"
                }
                return returnStr;
            },
            chaKan: function (item) {
                var that = this;
                var param = {
                    title: '查看培训',         //顶部标题
                    url: '/page/exam/tempExamDetailApp.html?isAdd=0&pageType=look&id=' + item.id+'&userId='+that.userId
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            shenHe: function (item) {
                var that = this;
                var title = '审核培训';
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    title: title,      //顶部标题
                    url: '/page/exam/tempExamDetailApp.html?isAdd=0&pageType=look&id=' + item.id + '&userId=' + that.userId,
                    showTitleBar: true,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            daGuoDun: function (item) {
                var that = this;
                if (item.currentAuditorId == that.userId && item.auditFlag == 0) {
                    that.shenHe(item);
                } else if (item.createUserId == that.userId && item.auditFlag != 0 && item.auditFlag != 1) {
                    //return false;
                    that.bianJi(item);
                } else if (item.unNeedPX == 1) {
                    if (item.passFlag == 0 && item.needPX == 1) {
                        that.goDetail(item);
                    } else {
                        that.chaKan(item);
                    }
                } else if (item.auditFlag == 1 && item.needPX == 1 && item.unNeedPX != 1) {
                    that.goDetail(item);
                } else {
                    return false;
                }
            },
            bianJi: function (item) {
                var that = this;
                var title = '编辑培训';
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    title: title,      //顶部标题
                    url: '/page/exam/tempExamDetailApp.html?isAdd=0&pageType=edit&id=' + item.id + '&userId=' + that.userId,
                    showTitleBar: false,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            goDetail: function (item) {
                //console.log(item)
                var that = this;
                var param = {
                    id: item.id,
                    passFlag: item.passFlag
                }
                JSBridge.call(UI, 'showExamFile', param, function (res) {
                })
            },
            getList: function () {
                var that = this;
                $.wyui.page.dataUrl = server.ip + "/exam/getExamListByUserId.json";
                $.wyui.page.queryParams.userId = that.userId;
                $.extend($.wyui.page.queryParams);
                $.wyui.page.getByPage();
            },
            deleteLeaveUser: function () {
                var that = this;
                JSBridge.call(UI, 'showLoading', {})
                /* $.wyui.postMethod("/exam/deleteLeaveUser.json", {}, function (rightOp) {
                     that.getList();
                 });*/
                that.getList();
            },
            stateTO: function (item) {
                var that = this;
                var state = '';
                switch (item.auditFlag) {
                    case "-1":
                    case -1:
                        state = "未提交";
                        break;
                    case "0":
                    case 0:
                        if (item.currentAuditorId == that.userId) {
                            state = "<span style='color:red;'>待审核</span>";
                        } else {
                            state = "待审核";
                        }
                        break;
                    case "1":
                    case 1:
                        state = "已通过";
                        break;
                    case "2":
                    case 2:
                        if (item.createUserId == getCurrentUser().id) {
                            state = "<span style='color:red;'>已驳回</span>";
                        } else {
                            state = "已驳回";
                        }
                        break;
                }
                var state1 = '';
                var str = that.haveTime(item);
                if (state == '已通过') {
                    if (item.needPX == 1) {
                        if (item.passFlag == 0) {
                            if (str == '已截止') {
                                state1 = "<span style='color:red;'>已逾期</span>";
                            } else {
                                state1 = '未通过';
                            }
                        } else {
                            state1 = '已通过';
                        }
                    } else {
                        if (str == '已截止') {
                            state1 = '已结束';
                        }else{
                            state1 = '考核中';
                        }
                    }
                } else {
                        state1 = state;
                }
                return state1;
            }
        },
        mounted: function () {
            var that = this;
            that.deleteLeaveUser();
            /*
            $.wyui.postMethod('/exam/getExamListByUserId.json', data, function (data) {

                that.list = data.records;
            });*/
            //分页

        }
    });

</script>
<script>
    //非滚动加载回调函数
    $.wyui.page.getByPage_callback_new = function (sendData) {

        app.list = sendData
        document.getElementById("scrollDiv").scrollTop = 0;
        JSBridge.call(UI, 'hideLoading')
    };
    //滚动加载回调函数
    $.wyui.page.getByPage_scroll_callback = function (list) {
        console.log(list)
        if (list.length < 30) {
            app.isMore = true;
            isLoad = false;
        } else {
            isLoad = true;
        }
        for (var i = 0; i < list.length; i++) {
            app.list.push(list[i]);
        }
        JSBridge.call(UI, 'hideLoading')
    }
    /************************滚动加载******************************/
    var isLoad = true;
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() + 20 > $(document).height()) {
            if (isLoad) {
                isLoad = false;
                setTimeout($.wyui.page.getByPage("scroll"), 1000);
            }
        }
    });
</script>

</body>